import React from 'react'
import '../wch/css/login.css'
import { Footer, NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
import { FaceRecognitionOutline, MailOutline,PhonebookOutline } from 'antd-mobile-icons'
export default function Login() {
  // 路由跳转
  const navigate = useNavigate()
  const back = () => {
    navigate('/launch')
  }

  // 跳转首页
  const index_d = () => {
    navigate('/index_d')
  }

  const email = () => {
    navigate('/email')
  }

  const face = () => {
    navigate('/face')
  }
  // 跳转手机号页面
  const phone = () => {
    navigate('/phone')
  }
  return (
    <div id='li_login'>
      {/* 导航栏 */}
      <div id='login_header'>
        <div id='header_inco' onClick={back}>
          <NavBar></NavBar>
        </div>
      </div>
      {/* 本机手机号码登录 */}
      <div id='login_content'>
        <div id='login_content1'>
          <div id='login_content_inco'>
            <div id='login_content_p'>票</div>
          </div>
        </div>
        <div id='login_content2'>本机号码登录</div>
      </div>

      {/* 手机号登录 */}
      <div id='login_number'>
        <div id='login_phone'>151****7588</div>
      </div>

      <div id='login_div' onClick={index_d}>一键登录</div>

      <div id='login_qh' onClick={phone}>切换到其它号码登录</div>

      <div id='login_div1'>
        <Footer label='或通过一下方式登录'></Footer>
      </div>

      <div id='login_footer'>
        <div id='login_footers' onClick={face}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><PhonebookOutline /></div></div>
        <div id='login_footers' onClick={face}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><FaceRecognitionOutline /></div></div>
        <div id='login_footers' onClick={email}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><MailOutline /> </div></div>
      </div>

      <div id='login_out'>
        <div id='login_footer2'>登录或注册代表您同意<span style={{ color: '#ff7363' }}>用户服务协议</span></div>
      </div>

    </div>
  )
}
